<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="120">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="承修方">
            <el-input v-model="searchForm.repair" placeholder="请输入承修方"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="托修方">
            <el-input v-model="searchForm.consignor" placeholder="请输入托修方"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编码">
            <el-input v-model="searchForm.contractCode" placeholder="请输入合同编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆VIN码">
            <el-input v-model="searchForm.carVinNo" placeholder="请输入车辆VIN码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="托修车牌号码">
            <el-input
              v-model="searchForm.carLicenseNumber"
              placeholder="请输入托修车牌号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增合同</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="enterPise" label="合同编码" width="180" align="center" />
      <el-table-column prop="repair" label="承修方" align="center" />
      <el-table-column prop="consignor" label="托修方" align="center" />
      <el-table-column prop="carVinNo" label="车辆VIN码" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="你确定要删除该设备?" @confirm="handleDelete(row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="140">
        <el-form-item label="承修方" prop="repair">
          <el-input v-model="form.repair" placeholder="请输入承修方" />
        </el-form-item>
        <el-form-item label="托修方" prop="consignor">
          <el-input v-model="form.consignor" placeholder="请输入托修方" />
        </el-form-item>
        <el-form-item label="托修车基本信息" prop="carInfo">
          <el-input v-model="form.carInfo" placeholder="请输入托修车基本信息" />
        </el-form-item>
        <el-form-item label="托修车牌号码" prop="carLicenseNumber">
          <el-input v-model="form.carLicenseNumber" placeholder="请输入托修车牌号码" />
        </el-form-item>
        <el-form-item label="车辆VIN码" prop="carVinNo">
          <el-input v-model="form.carVinNo" placeholder="请输入车辆VIN码" />
        </el-form-item>
        <el-form-item label="收费标准" prop="feeStandard">
          <el-input v-model="form.feeStandard" placeholder="请输入收费标准" />
        </el-form-item>
        <el-form-item label="合同编码" prop="contractCode">
          <el-input v-model="form.contractCode" placeholder="请输入合同编码" />
        </el-form-item>
        <el-form-item label="旧件处理方式" prop="oldPartsDisposalMethod">
          <el-input v-model="form.oldPartsDisposalMethod" placeholder="请输入旧件处理方式" />
        </el-form-item>
        <el-form-item label="配件提供方式" prop="supplyModeOfAccessories">
          <el-input v-model="form.supplyModeOfAccessories" placeholder="请输入配件提供方式" />
        </el-form-item>
        <el-form-item label="质量保证期" prop="warrantyPeriod">
          <el-date-picker
            v-model="form.warrantyPeriod"
            type="date"
            placeholder="请选择质量保证期"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="维修期限" prop="durationOfMaintenance">
          <el-input v-model="form.durationOfMaintenance" placeholder="请输入维修期限" />
        </el-form-item>
        <el-form-item label="托修车辆维修项目" prop="vehicleMaintenanceProject">
          <el-input v-model="form.vehicleMaintenanceProject" placeholder="请输入托修车辆维修项目" />
        </el-form-item>
        <el-form-item label="结算方式" prop="clearWay">
          <el-input v-model="form.clearWay" placeholder="请输入结算方式" />
        </el-form-item>
        <el-form-item label="双方权利义务" prop="bothPower">
          <el-input v-model="form.bothPower" placeholder="请输入双方权利义务" />
        </el-form-item>
        <el-form-item label="有关约定" prop="relevantAgreement">
          <el-input v-model="form.relevantAgreement" type="textarea" placeholder="请输入有关约定" />
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import {
  getRepairContractPageApi,
  addRepairContractApi,
  editRepairContractApi,
  deleteRepairContractApi
} from "@/api/maintain";
import FormDrawer from "@/components/FormDrawer.vue";

const {
  tableData,
  searchForm,
  currentPage,
  limit,
  total,
  handleRestSearch,
  handleGetTableList,
  handleDelete
} = useInitTable({
  searchForm: {
    repair: "",
    consignor: "",
    contractCode: "",
    carVinNo: "",
    carLicenseNumber: ""
  },
  getTableList: getRepairContractPageApi,
  deleteData: deleteRepairContractApi
});

const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      repair: "",
      consignor: "",
      carInfo: "",
      carLicenseNumber: "",
      carVinNo: "",
      feeStandard: "",
      contractCode: "",
      oldPartsDisposalMethod: "",
      supplyModeOfAccessories: "",
      warrantyPeriod: "",
      durationOfMaintenance: "",
      vehicleMaintenanceProject: "",
      clearWay: "",
      bothPower: "",
      relevantAgreement: ""
    },
    rules: {
      repair: [{ required: true, message: "请输入承修方", trigger: "blur" }],
      consignor: [{ required: true, message: "请输入托修方", trigger: "blur" }],
      carInfo: [{ required: true, message: "请输入车辆信息", trigger: "blur" }],
      carLicenseNumber: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
      carVinNo: [{ required: true, message: "请输入车辆VIN码", trigger: "blur" }]
    },
    createData: addRepairContractApi,
    updateData: editRepairContractApi,
    success: () => {
      handleGetTableList();
    }
  }
);
</script>
<style scoped lang="scss"></style>
